<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="editTeacherForm" ref="editTeacherRef" :rules="editTeacherRules">
            <el-form-item label="人员工号" :label-width="formLabelWidth" prop="teacherNumber">
                <el-input v-model="teacherForm.teacherNumber" autocomplete="off" readonly
                    style="width: 218px"></el-input>
            </el-form-item>
            <el-form-item label="人员姓名" :label-width="formLabelWidth" prop="teacherName">
                <el-input v-model="teacherForm.teacherName" autocomplete="off" readonly style="width: 218px"></el-input>
            </el-form-item>
            <el-form-item label="学科名称" :label-width="formLabelWidth" prop="departmentId">
                <el-select ref="departmentId" v-model="teacherForm.departmentId" autocomplete="off" placeholder="请选择学科">
                    <el-option v-for="item in departmentList" :key="item.departmentId" :value="item.departmentId"
                        :label="item.departmentName"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "teacher",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            departmentList: [],
            subjectList: [],
            teacherForm: {
                teacherNumber: "",
                teacherName: "",
                departmentId: "",
            },
            // 校验规则
            editTeacherRules: {
                teacherNumber: vxRule(true, null, "blur"),
                teacherName: vxRule(true, null, "blur"),
                departmentId: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getDepartmentList() {
            httpService(
                "/pythonApi/attendanceApi/getDepartmentList",
                {},
                "get"
            ).then((data) => { 
                this.departmentList = data.data;
                // this.departmentList.push({
                //     departmentId: "",
                //     departmentName: "无"
                // })
                // console.log(this.departmentList);
            });
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.teacherForm.teacherNumber = "";
            this.teacherForm.teacherName = "";
            this.teacherForm.departmentName = "";

        },
        save() {
            let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
            params.append("teacherNumber", this.teacherForm.teacherNumber);
            params.append("teacherName", this.teacherForm.teacherName);
            params.append("departmentId", this.teacherForm.departmentId);
            httpService("/pythonApi/attendanceApi/changeTeacherDepartment", params, "post").then(
                (data) => {
                    if (data.code == 200) {
                        ElMessage.success(data.message);
                        this.clear();
                        //刷新父组件的数据
                        this.$parent.getTeacherSubjectList();
                    } else {
                        ElMessage.error(data.message);
                    }
                }
            );
        },
    },
};
</script>
<style></style>